<template>
  <div class="image-container">
    <el-card>
      <my-bread>素材管理</my-bread>
      <!-- 表头 -->
        <el-radio-group v-model="isCollected" @change="hCollect">
          <el-radio-button label="false">全部</el-radio-button>
          <el-radio-button label="true">收藏</el-radio-button>
        </el-radio-group>
        <el-button style="float:right" type="success" :loading="isloading" @click="dialogTableVisible=true,isloading=false">上传图片素材</el-button>
        <!-- 分栏布局 总共 24列 -->
        <el-row :gutter="10">
          <el-col :span="4" v-for="img in images" :key="img.id" class="img_item">
            <el-image style="width:160px; height:180px" :src="img.url"></el-image>
            <div class="option" v-show="!isCollected">
              <!-- 是否收藏 -->
              <span :class="{ 'red': img.is_collected }"
                @click="hCollected(img)"
                class="el-icon-star-off">
              </span>
              <!-- 删除 -->
              <span class="el-icon-delete" @click="hDelete(img.id)"></span>
            </div>
          </el-col>
        </el-row>
        <!-- 页码 -->
        <el-pagination
          style="margin-top: 10px"
          background
          @current-change="hPageChange"
          layout="prev, pager, next"
          :total="total_count">
        </el-pagination>
    </el-card>

    <!-- 上传素材图片的对话框 :append-to-body="true"遮罩-->
    <!--
      本质还是ajax技术在做上传。

      action：上传地址
      show-file-list:false，不需要显示已上传的文件列表
      on-success： 上传成功之后的回调函数
      before-upload: 上传之前对文件进行检测
      name: 设置上传的文件参数名，要与后端接口中的要求一致。
    -->
    <el-dialog title="上传图片" :visible.sync="dialogTableVisible" :modal="false">
      <el-upload
        class="avatar-uploader"
        action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
        :show-file-list="false"
        :headers="headers"
        name="image"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <!-- el-image标签上 有自带的加载完成方法@load:图片加载完成时使用  @load="hSuccessimg"-->
        <el-image
          v-if="imageUrl"
          :src="imageUrl"
          @load="hSuccessimg"
          class="avatar"></el-image>
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      radio1: '全部',
      images: [],
      // 最初选择全部
      isCollected: false,
      total_count: 0,
      // 弹框显示与隐藏
      dialogTableVisible: false,
      // 上传图片地址，返回给后端
      imageUrl: '',
      // 添加素材接口
      // 由于这里的上传不是走的axios,而处理上传的接口又需要token
      // 所以这里只能手动添加tok
      headers: { Authorization: `Bearer ${localStorage.getItem('tokenStr')}` },
      isloading: false
    }
  },
  // 获取图片列表
  created () {
    this.loadImages()
  },
  methods: {
    // 获取列表数据
    async loadImages () {
      const result = await this.$http({
        method: 'get',
        url: '/mp/v1_0/user/images',
        params: {
          per_page: 10,
          collect: this.isCollected, // 是否时i收藏 页
          page: this.curPage
        }
      })
      // console.log('素材列表：', result)
      this.images = result.data.data.results
      this.total_count = result.data.data.total_count
      // console.log(this.total_count)
    },
    // 删除
    hDelete (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const idStr = id.toString()
          const result = await this.$http({
            method: 'delete',
            url: '/mp/v1_0/user/images/' + idStr
          })
          console.log(result)
          this.$message.success('删除成功')
          this.loadImages()
        } catch (error) {
          this.$message.error('删除失败！')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 收藏列表显示
    hCollect () {
      console.log(this.isCollected)
      // 1.重置页码
      this.curPage = 1
      // 2.重发请求
      this.loadImages()
    },
    // 用户点击了分页
    hPageChange (curPage) {
      // 1.更新页码
      this.curPage = curPage
      // 2.重发请求
      this.loadImages()
    },
    // 添加素材成功
    handleAvatarSuccess (res) {
      // console.log('上传成功', res)
      // 1.成功上传后，显示在预览图中
      this.imageUrl = res.data.url
      this.$message.success('图片上传成功')
      // 重新加载页面
      this.loadImages()
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 图片加载完成后显示
    // 加载完成，显示2秒后关闭对话框
    hSuccessimg () {
      console.log('hSuccessimg加载图片完成...')
      setTimeout(() => {
        this.dialogTableVisible = false
      }, 2000)
    },
    // 添加/取消收藏 功能
    async hCollected (img) {
      // 方法二，解构赋值
      // const { id, is_collected: isCollected } = img
      // try {
      //   const result = await this.$http({
      //     method: 'put',
      //     url: '/mp/v1_0/user/images/' + id,
      //     data: {
      //       collect: !isCollected
      //     }
      //   })
      //   console.log('收藏/取消成功：', result)
      //   this.loadImages()
      // } catch (error) {
      //   console.log(error)
      // }
      // 方法一：
      try {
        const result = await this.$http({
          method: 'put',
          url: '/mp/v1_0/user/images/' + img.id,
          data: {
            collect: !img.is_collected
          }
        })
        this.$message.success('操作成功！')
        console.log('收藏/取消收藏成功：', result)
        this.loadImages()
      } catch (error) {
        console.log(error)
        this.$message.error('操作失败！')
      }
    }
  }
}
</script>

<style scoped lang="less">
 .el-radio-group {
    margin: 20px 0;
  }
  .img_item {
    position: relative;
    box-sizing: border-box;
    .option{
      position: absolute;
      left: 5px;
      right: 15px;
      bottom: 5px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: rgba(0, 0, 0, 0.5);
      color: #ffffff;
      span {
        margin: 0 30px;
        cursor: pointer;
      }
      .red {
        color: red;
      }
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px solid #eee;
    margin:  10px 238px;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
